<template>
  <div class="app-box">
    <!-- 头部-->
    <div class="header-box">
            <div class="left-box" @click="goPreviou">
              <img src="@/assets/left.png" alt="" srcset="">
            </div>
      <div class="h-box">往期考试</div>
    </div>
    <el-row class="app-item-contain"  v-loading="loading">
      <!--试卷列表-->
      <div class="test-paper">
        <div class="test-paper-item" v-for="item in paperList" :key="item.id">
          <!--已做   haveFinished==0-->

          <div class="littlt-box" v-if="item.haveFinished=='0'"  @click="showPager(item)">
            <!--左-->
            <div>
              <div>{{ item.paperTitle }}</div>
              <div class="test-des">
                <span style="margin-right: 10px">题目数量：{{ item.questionsQuantity }}</span>
                <span>试卷总分：{{ item.testScore }}</span>
              </div>
              <div class="test-des">
              <span>试卷类型：
              <span v-if="item.type==1">销售类</span>
                 <span v-if="item.type==0">安全生产类</span>
              </span>
              </div>
            </div>
            <!--右-->
            <div class="" v-if="item.haveFinished=='0'" @click="showPager(item)">
              <div class="test-time">查看试卷</div>
            </div>
          </div>

          <div class="littlt-box" v-if="item.haveFinished==null"  @click="showPast(item)">
            <!--左-->
            <div>
              <div>{{ item.paperTitle }}</div>
              <div class="test-des">
                <span style="margin-right: 10px">题目数量：{{ item.questionsQuantity }}</span>
                <span>试卷总分：{{ item.totalPoints }}</span>
              </div>
              <div class="test-des">
              <span>试卷类型：
              <span v-if="item.type==1">销售类</span>
                 <span v-if="item.type==0">安全生产类</span>
              </span>
              </div>
            </div>
            <div class="" v-if="item.haveFinished==null">
<!--              <div class="test-time go-box"  style="color: red">已过期</div>-->
              <el-button type="danger"  size="small">已过期</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import {getpageIsListr, getPaper} from '@/api/index'

export default {
  name: "indexPage",
  data() {
    return {
      loading: true,
      paperList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  mounted() {
    // 在组件挂载时添加滚动事件监听器
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 在组件销毁前移除滚动事件监听器，避免内存泄漏
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
    let token = JSON.parse(localStorage.getItem('tokenInfo'))
    this.getList(this.queryParams, token)
  },
  methods: {
    goPreviou() {
      this.$router.back(-1)
    },
    handleScroll() {
      // 获取文档的总高度
      const documentHeight = Math.max(
          document.body.scrollHeight,
          document.documentElement.scrollHeight,
          document.body.offsetHeight,
          document.documentElement.offsetHeight,
          document.body.clientHeight,
          document.documentElement.clientHeight
      );
      // 获取当前滚动的距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop, 's')
      console.log(documentHeight, 'height')
      // 获取窗口的高度
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      // 判断是否触底
      if (scrollTop + windowHeight + 50 >= documentHeight) {
        this.queryParams.pageSize+=10

        getpageIsListr(this.queryParams,JSON.parse(localStorage.getItem('tokenInfo'))).then(res => {
          if (res.code == 200) {
            this.paperList = res.rows
            this.loading = false
          } else if (res.code == 401) {
            this.$router.push({
              path: '/',
            })
          }
        })
        // 这里可以添加触底后的业务逻辑，比如加载更多数据
      }
    },
    getList(data, token) {
      getpageIsListr(data, token).then(res => {
        if (res.code == 200) {
          this.paperList = res.rows
          this.loading = false
        } else if (res.code == 401) {
          this.$router.push({
            path: '/',
          })
        }
      })
    },
    showPager(row) {
      this.$router.push({
        path: '/showPaper',
        query: {
          paperObj: JSON.stringify(row)
        }
      })
    },
    showPast(row) {
      this.$router.push({
        path: '/showPast',
        query: {
          paperObj: JSON.stringify(row)
        }
      })
    },
    goDo(id) {
      this.$router.push({
        path: '/do',
        query: {
          id: id
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.app-box {
  background-color: rgb(239, 243, 247)
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.app-item-contain {
  background-color: white;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.index-title-h3 {
  font-size: 16px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  height: 80%;
  display: block;
  margin: 20px auto 10px auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.carousel-img {
  display: inline-block;
  height: 300px;
  width: 100%;
}

.test-paper {
  margin-bottom: 50px;
}

.test-paper-item {
  //display: flex;
  //justify-content: space-between;
  border-top: 1px solid #999999;
  background: #fff;
  padding: 10px;
  margin-bottom: 1px;
  font-size: 14px;
  flex-direction: row;
  align-items: center;

  div {
    line-height: 1.8;
  }
}

.test-des {
  color: #909399;
  font-size: 13px;
}

.test-time {
  padding: 0 10px;
  color: #f37b1d;
  background-color: #eff3f7;
  font-size: 14px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  word-wrap: break-word;
  word-break: break-all;
  align-items: center;
}

.go-box {
  color: rgb(134, 206, 97);
}

.header-box {
  display: flex;
  padding: 5px 10px;
}

.h-box {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
}
.littlt-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
